<template>
  <div id='Detail' class='Detail'>
    <detail-nav-bar class="detail-navbar" @btnClick="btnClick" ref="nav" />
    <div class="content">
      <scroll ref="scroller" class="detail-content" :pull-up-load="true" :probe-type="3" @scroll="contentScroll">
        <swiper-detail :topImages='topImages' />
        <detail-base-info :goods='goods' />
        <detail-shop :shop='shop' />
        <detail-goods-info :goods-info="goodsInfo" ref="goodsInfo" @detailImgLoad="detailImgLoad" />
        <detail-param :paramsInfo="paramsInfo" />
        <detail-remark :rate="rate" ref="remark" />
        <good-list :goods='recommend' ref="goodsList" />
        <detail-hot />

      </scroll>
    </div>

    <back-top @click.native="backClick" v-show="isShoeBackTop" />
    <detail-bottom @addToCart="addToCart" />
    <toast :message="message" :show="show" />
  </div>
</template>

<script>
  import DetailNavBar from '../detail/childCopms/DetailNavBar.vue'
  import swiperDetail from './childCopms/swiperDetail.vue'
  import DetailBaseInfo from './childCopms/DetailBaseInfo.vue'
  import DetailShop from './childCopms/DetailShop.vue'
  import DetailGoodsInfo from './childCopms/DetailGoodsInfo.vue'
  import DetailParam from './childCopms/DetailParam.vue'
  import DetailRemark from './childCopms/DetailRemark.vue'
  import DetailHot from './childCopms/DetailHot.vue'
  import DetailBottom from './childCopms/DetailBottom.vue'
  import Scroll from '../../components/common/scroll/scroll.vue'
  import goodList from '../../components/content/goods/goodList.vue'
  import Toast from '../../components/common/Toast/Toast.vue'
  import {
    itemListenerMixin,
    backTopMixin
  } from '../../common/mixin'
  import {
    getDetail,
    recommend,
    GoodsInfo,
    Shop,
    GoodsParam
  } from '../../network/detail'
  import {
    debounce
  } from '../../common/utils'
  import {
    mapActions
  } from 'vuex'
  export default {
    name: 'Detail',
    props: { // 父辈向子辈传参
    },
    mixins: [itemListenerMixin, backTopMixin],
    components: { // 组件的引用

      DetailNavBar,
      swiperDetail,
      DetailBaseInfo,
      DetailShop,
      DetailGoodsInfo,
      DetailParam,
      DetailRemark,
      DetailHot,
      DetailBottom,
      Scroll,
      goodList,
      Toast

    },
    data() {
      return {
        iid: null,
        topImages: [],
        goods: {},
        goodsInfo: {},
        shop: {},
        paramsInfo: {},
        rate: {},
        recommend: {},
        themeTopY: [],
        getThemeTopY: null,
        currentIndex: 0,
        message: "",
        show: false


      }
    },

    methods: { // 方法
      ...mapActions(
        ['addCart']
      ),
      detailImgLoad() {
        this.refresh()
        this.getThemeTopY()
      },
      btnClick(index) {
        console.log(index);
        this.$refs.scroller.scrollTo(0, -this.themeTopY[index], 200)

      },
      contentScroll(position) {
        const positionY = -position.y
        // console.log(position);
        const length = this.themeTopY.length
        for (var i = 0; i < length; i++) {
          //  if (this.currentIndex !== i && ((i < length - 1 && positionY >= this.themeTopY[i] && positionY < this
          //     .themeTopY[i + 1]) || (i === length -
          //     1 && positionY >= this.themeTopY[i])))
          if (this.currentIndex !== i && (i < length - 1 && positionY >= this.themeTopY[i] && positionY < this
              .themeTopY[i + 1])) {
            this.currentIndex = i
            // console.log(this.currentIndex);
            this.$refs.nav.currentIndex = this.currentIndex

          }

        }
        //返回顶部按钮，当下拉超过1000时就显示按钮，不超过则不显示
        this.isShowBackTop(position)
      },
      addToCart() {
        const product = {}
        product.image = this.topImages[0]
        product.title = this.goods.title
        product.desc = this.goods.desc
        product.price = this.goods.realPrice
        product.iid = this.iid
        // console.log(product);

        // 通过映射的形式来添加和打印数据
        this.addCart(product).then(ref => {
          console.log(ref);
          this.$toast.show(ref, 2000)
        })
      },


    },
    mounted() { // 页面进入时加载内容

    },
    deactivated() {
      this.$bus.$off('itemImgLoad', this.itemImgListener)
    },
    computed: { // 计算属性

    },
    created() { // 实例被创建之后执行代码
      //1.保存传入的id
      this.iid = this.$route.params.id

      //2.根据iid来请求详情数据
      getDetail(this.iid).then(res => {
        // console.log(res);
        const data = res.data.result;
        //1.轮播图信息
        this.topImages = data.itemInfo.topImages
        //2.商品的价格效率以及收藏等信息
        this.goods = new GoodsInfo(data.itemInfo, data.columns, data.shopInfo.services)
        //3.店铺信息数据
        this.shop = new Shop(data.shopInfo)
        //4.商品的图片展示
        this.goodsInfo = data.detailInfo
        //5.每个商品的参数，比如颜色尺码
        this.paramsInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
        //6.评论的数据
        this.rate = data.rate.list
      })
      // 3.获取推荐的数据
      //1.保存传入的id

      recommend().then(res => {
        console.log(res);
        this.recommend = res.data.data.list


      })
      this.getThemeTopY = debounce(() => {
        this.themeTopY = []
        this.themeTopY.push(0)
        this.themeTopY.push(this.$refs.goodsInfo.$el.offsetTop)
        this.themeTopY.push(this.$refs.remark.$el.offsetTop)
        this.themeTopY.push(this.$refs.goodsList.$el.offsetTop)
        this.themeTopY.push(Number.MAX_VALUE)
        // console.log(this.themeTopY);
      }, 100)

    },
    watch: { // 监测变化

    }
  }

</script>
<style scoped>
  .Detail {
    position: relative;
    z-index: 9;
    height: 100vh;
  }

  .detail-content {
    height: 100%;

    background: white;
    overflow: hidden;


  }

  .detail-navbar {
    position: relative;
    z-index: 10;
    background: rgb(255, 255, 255) !important;

  }

  .content {
    height: calc(100% - 44px - 49px);
    overflow: hidden;
  }

  .scroll {
    height: 100%;
  }

</style>
